<template>
    <div id="detail">
       <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"></detail-nav-bar>
       <scroll class="content" :pull-up-load="true" :probe-type="3" ref="scroll" @scroll="contentScrill" >
       <detail-swiper :top-images="topImages"></detail-swiper>
       <detail-base-info :goods="goods"></detail-base-info>
       <detail-shop-info :shop="shop"></detail-shop-info>
       <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
       <detail-param-info ref="params" :param-info="paramInfo"></detail-param-info>
       <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
       <goods-list ref="recommend" :goods="recommends"></goods-list>
       </scroll>
       <detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>
        <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
    </div>
    
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'
 

import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import {debounce} from 'common/utils'
import BackTop from 'components/content/backTop/BackTop'

//请求数据
import {getDetail,Goods,Shop,GoodsParam,getRecommend}from "network/detail"








export default {
    name:'Detail',
    components:{
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
      GoodsList,
      DetailBottomBar,
      BackTop

        
        
   
    },
    data(){
        return{
            iid:null,
           topImages:[],
           goods:{},
           shop:{},
           detailInfo:{},
           paramInfo:{},
           commentInfo:{},
           recommends:[],
           themeTopYs:[],
           getThemeTopY:null,
           currentIndex:0,
        isShowBackTop:false,
        thitopImages:[]
        }
    },
    mounted(){
        
    },
    created(){
        //1.保存传入的iid
        this.iid=this.$route.params.iid

        //2.根据iid请求详情数据
        getDetail(this.iid).then(res=>{
            //1.获取顶部的图片轮播图数据
           
            const data=res.result
           this.topImages=data.itemInfo.topImages,

           //2.获取商品信息
           this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)

            //3.创建店铺信息的对象
            this.shop=new Shop(data.shopInfo)

            //4.保存商品的详细数据
            this.detailInfo=data.detailInfo;


            //5.获取参数信息
            this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)

            //6.取出评论的信息
            if(data.rate.cRate !==0){
                this.commentInfo=data.rate.list[0]
            }
            
        })
        //3.请求推荐数据
        getRecommend().then(res=>{
            this.recommends=res.data.list
        })

        this.getThemeTopY=debounce(()=>{
        this.themeTopYs=[]
        this.themeTopYs.push(0)
        this.themeTopYs.push(this.$refs.params.$el.offsetTop)
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
        this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
        this.themeTopYs.push(Number.MAX_VALUE)
        })

      
    },
    updated(){
       
    },
    methods:{
        imageLoad(){
            this.$refs.scroll.refresh()
            this.getThemeTopY()

        
        },
        titleClick(index){
            
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index]+44,880)
        },
        contentScrill(position){
           const positonY=-position.y
        //    for(let i in this.themeTopYs){
        //        if(position>this.themeTopYs[i]&&positonY<this.themeTopYs[i+1]){
        //            console.log(i);
        //        }
        //    }
       
        let length=this.themeTopYs.length
        for(let i=0;i<length;i++){
            if(this.currentIndex!==i&&((i<length-1&&positonY>=this.themeTopYs[i]&&positonY<this.themeTopYs[i+1])||(i===length-1&&positonY>=this.themeTopYs[i]))){
                this.currentIndex=i
                this.$refs.nav.currentIndex=this.currentIndex
                

            }
        }
         //1.判断backtop是否显示
            if(position.y<-1000){
                this.isShowBackTop=true
            }else{
                this.isShowBackTop=false
            }
            //2.决定tabControl是否吸顶(postition:fixed)
            this.isTabFixed=(-position.y)>this.tabOffsetTop
        },
       backClick(){
            this.$refs.scroll.scrollTo(0,0,700)
        },
        //加入购物车
        addToCart(){
          //1.获取购物车想要展示的信息
          const product={}
          product.img=this.thitopImages[0]
          product.title=this.goods.title;
          product.desc=this.goods.desc;
          product.price=this.goods.newPrice;
          product.iid=this.iid
        

          //2.将商品加入购物车
        //   this.$store.commit('addCart',product)
        this.$store.dispatch('addCart',product)
        
        }
    }

}
</script>

<style scoped>
#detail{
    position: relative;
    z-index: 8;
    background-color: #fff;
    height: 100vh;
}
.content{
    height: calc(100% - 44px );
}
.detail-nav{
    position: relative;
    z-index: 9;
    background-color: #fff;
    
}   
</style>